<template>
  <div>
    <div>
      <el-input size="small" clearable v-model="listQuery.param.itemName" style="width: 200px;" placeholder="请输入项目名称">
      </el-input>
      <el-button size="small" type="primary" icon="el-icon-search" @click="handleFilter" style="margin-left:10px;">
        查询
      </el-button>
      <el-button size="small" v-if="add_project_item_button_status" icon="el-icon-plus" style="margin-left:10px;" @click="handleAdd">
        新增
      </el-button>
    </div>

    <el-table :data="projectItemLists" style="width: 100%">
      <el-table-column prop="id" v-if="false"></el-table-column>
      <el-table-column prop="projectId" v-if="false"></el-table-column>
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-table :data="scope.row.images">
            <el-table-column label="图片类型" width="400">
              <template slot-scope="props">
                {{ props.row.imageType === 1 ? "凭据图片" : "实际图片" }}
              </template>
            </el-table-column>
            <el-table-column label="图片" width="400">
              <template slot-scope="props">
                <el-image v-if="props.row.imageUrl" style="width: 30px; height: 30px" :src="props.row.imageUrl | projectItemInfoMinImgUrl" :preview-src-list="getImgList(scope.row.images, props.$index)">
                </el-image>
              </template>
            </el-table-column>
            <!-- <el-table-column label="图片描述" prop="imageDesc">
              <template slot-scope="props">
                <span v-if="props.row.imageDesc.length<=40">{{props.row.imageDesc}}</span>
                <el-popover v-else placement="top-start" width="200" trigger="hover" :content="props.row.imageDesc">
                  <el-button type="text" slot="reference">{{props.row.imageDesc|textLimitLength(40)}}</el-button>
                </el-popover>
              </template>
            </el-table-column> -->
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="序号" width="200" prop="itemNo" show-overflow-tooltip></el-table-column>
      <el-table-column label="项目名称" width="200" prop="itemName" show-overflow-tooltip>
        <!-- <template slot-scope="scope">
          <span v-if="scope.row.itemName.length<=10">{{scope.row.itemName}}</span>
          <el-popover v-else placement="top-start" width="200" trigger="hover" :content="scope.row.itemName">
            <el-button type="text" slot="reference">{{scope.row.itemName|textLimitLength(10)}}</el-button>
          </el-popover>
        </template> -->
      </el-table-column>
      <el-table-column label="项目描述" width="200" prop="itemDesc" show-overflow-tooltip>
        <!-- <template slot-scope="scope">
          <span v-if="scope.row.itemDesc.length<=10">{{scope.row.itemDesc}}</span>
          <el-popover v-else placement="top-start" width="200" trigger="hover" :content="scope.row.itemDesc">
            <el-button type="text" slot="reference">{{scope.row.itemDesc|textLimitLength(10)}}</el-button>
          </el-popover>
        </template> -->
      </el-table-column>

      <el-table-column label="预算用量" width="200">
        <template slot-scope="scope">
          {{scope.row.budgetDosage | amountFormat}}
        </template>
      </el-table-column>
      <el-table-column label="预算单价" width="200">
        <template slot-scope="scope">
          {{scope.row.budgetAmount | amountFormat}}
        </template>
      </el-table-column>
      <el-table-column label="预算总价" width="200">
        <template slot-scope="scope">
          {{(scope.row.budgetDosage * scope.row.budgetAmount) | amountFormat}}
        </template>
      </el-table-column>

      <el-table-column prop="factDosage" label="实际用量" width="200">
        <template slot-scope="scope">
          {{scope.row.factDosage | amountFormat}}
        </template>
      </el-table-column>
      <el-table-column prop="factAmount" label="实际单价" width="200">
        <template slot-scope="scope">
          {{scope.row.factAmount | amountFormat}}
        </template>
      </el-table-column>
      <el-table-column label="实际总价" width="200">
        <template slot-scope="scope">
          {{(scope.row.factDosage * scope.row.factAmount) | amountFormat}}
        </template>
      </el-table-column>

      <el-table-column prop="unit" label="单位" width="200" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" width="350" fixed="right" v-if="show_project_record_button_status || show_project_cost_button_status || upd_project_item_button_status || del_project_item_button_status">
        <template slot-scope="scope">
          <el-button size="small" v-if="show_project_cost_button_status" icon="el-icon-document" @click="handleCostList(scope.row)">报销</el-button>
          <el-button size="small" v-if="upd_project_item_button_status" icon="el-icon-edit" type="primary" @click="handleEdit(scope.row)">修改</el-button>
          <el-button size="small" v-if="del_project_item_button_status" icon="el-icon-delete" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          <el-button size="small" v-if="show_project_record_button_status" icon="el-icon-document" @click="handleRecordList(scope.row)">记录</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10, 20, 40, 100]" :page-size="listQuery.size" layout="total, sizes, prev, pager, next, jumper" :total="projectItemTotal">
    </el-pagination>

    <el-dialog :title="projectItemTextMap[projectItemDialogStatus]" :visible.sync="projectItemDialogFormVisible" :close-on-click-modal="false" width="45%">

      <el-form :model="projectItemForm" :rules="projectItemFromRules" ref="projectItemForm" label-position="right" label-width="80px">
        <el-form-item label="序号" prop="itemNo">
          <el-input v-model="projectItemForm.itemNo" />
        </el-form-item>
        <el-form-item label="项目名称" prop="itemName">
          <el-input v-model="projectItemForm.itemName" />
        </el-form-item>
        <el-form-item label="项目描述" prop="itemDesc">
          <el-input v-model="projectItemForm.itemDesc" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" />
        </el-form-item>
        <el-form-item label="预算用量" prop="budgetDosage">
          <el-input :disabled="projectItemDialogStatus=='update'" type="number" min="0" max="999999.99" v-model.number="projectItemForm.budgetDosage" />
        </el-form-item>
        <el-form-item label="预算单价" prop="budgetAmount">
          <el-input :disabled="projectItemDialogStatus=='update'" type="number" v-model.number="projectItemForm.budgetAmount" />
        </el-form-item>
        <el-form-item label="预算总价">
          <el-input :disabled="true" :value="(projectItemForm.budgetDosage * projectItemForm.budgetAmount) | amountFormat" />
        </el-form-item>
        <el-form-item label="实际用量" prop="factDosage">
          <el-input type="number" v-model.number="projectItemForm.factDosage" />
        </el-form-item>
        <el-form-item label="实际单价" prop="factAmount">
          <el-input type="number" v-model.number="projectItemForm.factAmount" />
        </el-form-item>
        <el-form-item label="实际总价">
          <el-input :disabled="true" :value="(projectItemForm.factDosage * projectItemForm.factAmount) | amountFormat" />
        </el-form-item>
        <el-form-item label="单位" prop="unit">
          <el-input v-model="projectItemForm.unit" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center;">
        <el-button @click="handleCancel()">
          取 消
        </el-button>
        <el-button v-if="projectItemDialogStatus=='create'" type="primary" @click="handleCreate()">
          确 定
        </el-button>
        <el-button v-if="projectItemDialogStatus=='update'" type="primary" @click="handleUpdate()">
          确 定
        </el-button>
      </div>
    </el-dialog>

    <el-dialog title="报销列表" :visible.sync="projectCostDialogFormVisible" :close-on-click-modal="false" width="60%">
      <div>
        <div>
          <el-select v-model="costListQuery.param.state" @change="getCostList">
            <el-option label="所有" :value="-1"></el-option>
            <el-option label="未审核" :value="0"></el-option>
            <el-option label="经理审核" :value="1"></el-option>
            <el-option label="财务审核" :value="2"></el-option>
            <el-option label="经理退审" :value="100"></el-option>
            <el-option label="财务退审" :value="101"></el-option>
          </el-select>
          <el-button v-if="add_project_cost_button_status" icon="el-icon-plus" style="margin-left:10px;" @click="handleCostAdd">新增</el-button>
        </div>

        <el-table :data="costLists" style="width: 100%">
          <el-table-column prop="id" v-if="false"></el-table-column>
          <el-table-column type="expand">
            <template slot-scope="scope">
              <span :key="image" v-for="image in scope.row.images">
                <el-image style="width:30px;height:30px;margin-left:10px" :src="image | userCheckInfoMinImgUrl" :preview-src-list="[$options.filters['userCheckInfoImgUrl'](image)]">
                </el-image>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="名称" width="200" prop="costName" show-overflow-tooltip></el-table-column>
          <el-table-column label="描述" width="200" prop="costDesc" show-overflow-tooltip></el-table-column>
          <el-table-column label="类型" width="200" prop="costType"></el-table-column>
          <el-table-column label="金额" width="200" prop="costAmount"></el-table-column>
          <!-- <el-table-column label="报销数量" width="200" prop="costCount"></el-table-column> -->
          <el-table-column label="报销人" width="200" prop="userName"></el-table-column>
          <el-table-column label="报销时间" width="200" prop="createTime"></el-table-column>

          <el-table-column label="经理审核人" width="200" prop="managerApproveUser"></el-table-column>
          <el-table-column label="经理审核时间" width="200" prop="managerApproveTime"></el-table-column>
          <el-table-column label="经理审核备注" width="200" prop="managerApproveReason" show-overflow-tooltip></el-table-column>

          <el-table-column label="财务审核人" width="200" prop="financerApproveUser"></el-table-column>
          <el-table-column label="财务审核时间" width="200" prop="financerApproveTime"></el-table-column>
          <el-table-column label="财务审核备注" width="200" prop="financerApproveReason" show-overflow-tooltip></el-table-column>

          <!-- <el-table-column label="审核人" width="200" prop="approveUser"></el-table-column>
          <el-table-column label="审核时间" width="200" prop="approveTime"></el-table-column>
          <el-table-column label="审核备注" width="200" prop="approveReason" show-overflow-tooltip></el-table-column> -->

          <el-table-column label="状态" width="200" fixed="right">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.state === 0" type="info">未审核</el-tag>
              <el-tag v-else-if="scope.row.state === 1" type="success">经理审核</el-tag>
              <el-tag v-else-if="scope.row.state === 2" type="success">财务审核</el-tag>
              <el-tag v-else-if="scope.row.state === 100" type="danger">经理退审</el-tag>
              <el-tag v-else-if="scope.row.state === 101" type="danger">财务退审</el-tag>
              <el-tag v-else type="danger">删除</el-tag>
              <!-- <el-tag v-if="scope.row.payState === 0" type="info" style="margin-left:10px">未支付</el-tag>
              <el-tag v-else type="success" style="margin-left:10px">已支付</el-tag> -->
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100" fixed="right" v-if="upd_project_cost_button_status">
            <template slot-scope="scope">
              <el-button v-if="upd_project_cost_button_status" :disabled="scope.row.state!==0" style="margin-left:10px" type="primary" icon="el-icon-edit" size='mini' @click="handleCostEdit(scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleCostSizeChange" @current-change="handleCostCurrentChange" :current-page="costListQuery.page" :page-size="costListQuery.size" layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 30, 50]" :total="costTotal" small>
        </el-pagination>

        <el-dialog :title="projectItemTextMap[modifyCostDialogStatus]" :visible.sync="dialogModifyCostFormVisible" :close-on-click-modal="false" width="45%" append-to-body>
          <el-form :model="costFrom" :rules="costFromRules" ref="costFrom" label-position="right" label-width="80px">
            <el-form-item label="费用名称" prop="costName">
              <el-input v-model="costFrom.costName" />
            </el-form-item>
            <el-form-item label="费用描述" prop="costDesc">
              <el-input v-model="costFrom.costDesc" />
            </el-form-item>
            <el-form-item label="报销人" prop="userId">
              <el-select v-model="costFrom.userId" placeholder="请选择报销人">
                <el-option v-for="user in userDatas" :key="user.userId" :label="user.userName" :value="user.userId">
                  <span style="float: left">{{ user.userName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ user.roles }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="报销类型" prop="costTypeId">
              <el-select v-model="costFrom.costTypeId" placeholder="请选择报销类型">
                <el-option v-for="costType in costTypeLists" :key="costType.id" :label="costType.name" :value="costType.id"></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="报销数量" prop="costCount">
              <el-input type="number" v-model="costFrom.costCount" />
            </el-form-item> -->
            <el-form-item label="报销金额" prop="costAmount">
              <el-input type="number" v-model="costFrom.costAmount" />
            </el-form-item>
            <!-- <el-form-item label="支付情况" prop="payState">
              <el-radio-group v-model="costFrom.payState">
                <el-radio :label="0">未支付</el-radio>
                <el-radio :label="1">已支付</el-radio>
              </el-radio-group>
            </el-form-item> -->
          </el-form>

          <div slot="footer" class="dialog-footer" style="text-align:center;">
            <el-button @click="resetCostForm">取消</el-button>
            <el-button v-if="modifyCostDialogStatus=='create'" type="primary" @click="handleCostCreate">确定</el-button>
            <el-button v-if="modifyCostDialogStatus=='update'" type="primary" @click="handleCostUpdate">确定</el-button>
          </div>
        </el-dialog>
      </div>
    </el-dialog>

    <el-dialog title="金额记录列表" :visible.sync="projectRecordDialogFormVisible" :close-on-click-modal="false" width="60%">
      <div>
        <el-table :data="recordLists" style="width: 100%">
          <el-table-column prop="id" v-if="false"></el-table-column>
          <el-table-column label="修改前">
            <el-table-column label="单价">
              <template slot-scope="scope">
                {{scope.row.oldFactAmount | amountFormat}}
              </template>
            </el-table-column>
            <el-table-column label="用量">
              <template slot-scope="scope">
                {{scope.row.oldFactDosage | amountFormat}}
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="修改后">
            <el-table-column label="单价">
              <template slot-scope="scope">
                {{scope.row.newFactAmount | amountFormat}}
              </template>
            </el-table-column>
            <el-table-column label="用量">
              <template slot-scope="scope">
                {{scope.row.newFactDosage | amountFormat}}
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="修改时间" width="180">
            <template slot-scope="scope">
              {{scope.row.createTime | dateformat}}
            </template>
          </el-table-column>
          <el-table-column label="修改人" width="150" prop="createUser"></el-table-column>
        </el-table>
        <el-pagination @size-change="handleRecordSizeChange" @current-change="handleRecordCurrentChange" :current-page="recordListQuery.page" :page-size="recordListQuery.size" layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 30, 50]" :total="recordTotal" small>
        </el-pagination>

      </div>
    </el-dialog>
  </div>
</template>

<script>

import { mapGetters } from 'vuex';
import { addProjectItem, updProjectItem, delProjectItemInfo, getProjectItemInfo } from '@/api/projectItemInfo';

import {
  getProjectCost, addProjectCost, updProjectCost
} from '@/api/projectCostInfo';

import {
  getProjectUserInfo
} from '@/api/projectUserInfo'

import {
  getAllCostType
} from '@/api/costTypeInfo'

import {
  getItemPriceRecord
} from '@/api/projectItemPriceRecord'

export default {
  name: 'ProjectItemPage',
  props: {
    ProjectId: {
      type: Number
    }
  },
  watch: {
    ProjectId(newVal, oldVal) {
      console.log("item old: " + oldVal + ", new: " + newVal + ", watch: " + this.isWatch);
      this.projectId = newVal;
      this.listQuery.param.projectId = newVal;
      this.projectItemForm.projectId = newVal;
      this.costListQuery.param.projectId = newVal;
      this.userQuery.param.projectId = newVal;
      this.costFrom.projectId = newVal;
      if (newVal === 0) {
        this.projectItemLists = [];
        this.userDatas = [];
        this.projectItemTotal = 0;
      }
      else if (this.isWatch) {
        this.handleFilter();
        this.getAllUser();
      }
    }
  },
  computed: {
    ...mapGetters(["elements"])
  },
  data() {
    var validateDouble = (rule, value, callback) => {
      if (value < 0 || value >= 1000000) {
        callback(new Error('请输入0 至 999999.99'));
      }
      callback();
    };
    return {
      isWatch: false,
      projectId: 0,
      itemId: 0,
      listQuery: {
        page: 1,
        size: 10,
        param: {
          projectId: 0,
          itemName: undefined
        }
      },
      projectItemTotal: 0,
      projectItemLists: [],
      projectItemTextMap: {
        create: "创建",
        update: "修改"
      },
      projectItemDialogStatus: "",
      projectItemDialogFormVisible: false,
      projectItemForm: {
        id: 0,
        projectId: 0,
        itemNo: undefined,
        itemName: undefined,
        itemDesc: undefined,
        budgetDosage: undefined,
        factDosage: undefined,
        budgetAmount: undefined,
        factAmount: undefined,
        unit: undefined
      },
      projectItemFromRules: {
        itemNo: [
          { required: true, message: "请填写项目单号", trigger: "blur" },
          { min: 0, max: 20, message: '长度在 0 到 20 个字符', trigger: 'blur' }
        ],
        itemName: [
          { required: true, message: "请填写项目名称", trigger: "blur" },
          { min: 0, max: 20, message: '长度在 0 到 20 个字符', trigger: 'blur' }
        ],
        itemDesc: [
          { max: 200, message: '长度不超过 200 个字符', trigger: 'blur' }
        ],
        budgetDosage: [
          { required: true, message: "请填写预算用量", trigger: "blur" },
          { validator: validateDouble, trigger: 'blur' }
        ],
        factDosage: [
          { required: true, message: "请填写实际用量", trigger: "blur" },
          { validator: validateDouble, trigger: 'blur' }
        ],
        budgetAmount: [
          { required: true, message: "请填写预算金额", trigger: "blur" },
          { validator: validateDouble, trigger: 'blur' }
        ],
        factAmount: [
          { required: true, message: "请填写实际金额", trigger: "blur" },
          { validator: validateDouble, trigger: 'blur' }
        ],
        unit: [
          { required: true, message: "请填写单位", trigger: "blur" },
          { max: 10, message: '长度不超过 10 个字符', trigger: 'blur' }
        ]
      },

      projectCostDialogFormVisible: false,
      dialogModifyCostFormVisible: false,
      modifyCostDialogStatus: '',
      // 查询该工程的所有人员，供报销使用
      userQuery: {
        page: 1,
        size: 2147483640,
        param: {
          projectId: 0
        }
      },
      userDatas: [],
      // 查询报销类型接口
      costTypeQuery: {
        page: 1,
        size: 2147483640,
        param: {}
      },
      costTypeLists: [],
      // 报销查询参数
      costListQuery: {
        page: 1,
        size: 10,
        param: {
          state: -1,
          projectId: undefined,
          itemId: undefined
        }
      },
      costLists: [],
      costFrom: {
        id: 0,
        projectId: 0,
        itemId: 0,
        costName: undefined,
        costDesc: undefined,
        userId: undefined,
        costTypeId: undefined,
        // costCount: undefined,
        costAmount: undefined,
        // payState: 0
      },
      costFromRules: {
        costName: [
          { required: true, message: "请填写报销名称", trigger: "blur" },
          { min: 0, max: 20, message: '长度在 0 到 20 个字符', trigger: 'blur' }
        ],
        costDesc: [
          { required: true, message: "请填写报销备注", trigger: "blur" },
          { min: 0, max: 200, message: '长度在 0 到 200 个字符', trigger: 'blur' }
        ],
        userId: [
          { required: true, message: "请选择报销人员", trigger: "blur" }
        ],
        costTypeId: [
          { required: true, message: "请选择报销类型", trigger: "blur" }
        ],
        // costCount: [
        //   { required: true, message: "请填写报销数量", trigger: "blur" }
        // ],
        costAmount: [
          { required: true, message: "请填写报销金额", trigger: "blur" },
          { validator: validateDouble, trigger: 'blur' }
        ]
      },
      costTotal: 0,

      recordListQuery: {
        page: 1,
        size: 10,
        param: {
          itemId: 0
        }
      },
      recordLists: [],
      recordTotal: 0,
      projectRecordDialogFormVisible: false,

      successCode: 20000,

      add_project_item_button_status: false,
      upd_project_item_button_status: false,
      del_project_item_button_status: false,
      show_project_cost_button_status: false,
      add_project_cost_button_status: false,
      upd_project_cost_button_status: false,
      show_project_record_button_status: false,
    };
  },
  created() {
    this.getAllCostTypeLists();
    if (this.elements['add_project_item']) {
      this.add_project_item_button_status = true;
    }
    if (this.elements['upd_project_item']) {
      this.upd_project_item_button_status = true;
    }
    if (this.elements['del_project_item']) {
      this.del_project_item_button_status = true;
    }
    if (this.elements['show_project_cost']) {
      this.show_project_cost_button_status = true;
    }
    if (this.elements['add_project_cost']) {
      this.add_project_cost_button_status = true;
    }
    if (this.elements['upd_project_cost']) {
      this.upd_project_cost_button_status = true;
    }
    if (this.elements['show_project_record']) {
      this.show_project_record_button_status = true;
    }
  },
  mounted() {
  },
  methods: {
    show() {
      this.isWatch = true;
      if (this.projectId === 0) {
        this.projectItemLists = [];
        this.userDatas = [];
        this.projectItemTotal = 0;
        return;
      }
      this.handleFilter();
      this.getAllUser();
    },
    hide() {
      this.isWatch = false;
    },
    getImgList(images, index) {
      var imgLists = [];
      for (let i = index; i < images.length; i++) {
        imgLists.push(this.$options.filters['projectItemInfoImgUrl'](images[i].imageUrl));
      }
      for (let i = 0; i < index; i++) {
        imgLists.push(this.$options.filters['projectItemInfoImgUrl'](images[i].imageUrl));
      }
      return imgLists;
    },
    handleFilter() {
      getProjectItemInfo(this.listQuery).then(resp => {
        if (resp.code === this.successCode) {
          this.projectItemLists = resp.datas.datas;
          this.projectItemTotal = resp.datas.total;
        }
      })
    },
    handleAdd() {
      this.handleCancel();
      this.projectItemDialogFormVisible = true;
      this.projectItemDialogStatus = "create";
    },
    handleCreate() {
      this.$refs["projectItemForm"].validate(valid => {
        if (!valid) {
          return false;
        }
        addProjectItem(this.projectItemForm).then(resp => {
          const code = resp.code;
          const msg = resp.message;
          if (code === this.successCode) {
            this.handleCancel();
            this.handleFilter();
          }
        });
      });
    },
    handleEdit(row) {
      this.handleCancel();
      this.projectItemDialogFormVisible = true;
      this.projectItemDialogStatus = "update";
      this.$nextTick(() => {
        this.projectItemForm.id = row.id;
        this.projectItemForm.projectId = row.projectId;
        this.projectItemForm.itemNo = row.itemNo;
        this.projectItemForm.itemName = row.itemName;
        this.projectItemForm.itemDesc = row.itemDesc;
        this.projectItemForm.budgetDosage = row.budgetDosage;
        this.projectItemForm.factDosage = row.factDosage;
        this.projectItemForm.budgetAmount = row.budgetAmount;
        this.projectItemForm.factAmount = row.factAmount;
        this.projectItemForm.unit = row.unit;
      });
    },
    handleUpdate() {
      this.$refs["projectItemForm"].validate(valid => {
        if (!valid) {
          return false;
        }
        updProjectItem(this.projectItemForm).then(resp => {
          const code = resp.code;
          const msg = resp.message;
          if (code === this.successCode) {
            this.handleCancel();
            this.handleFilter();
          }
        });
      });
    },
    handleDelete(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delProjectItemInfo(row.id).then(() => {
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
            duration: 2000
          });
          this.handleFilter();
        });
      });
    },
    handleCancel() {
      this.projectItemDialogFormVisible = false;
      this.projectItemDialogStatus = "";
      if (this.$refs["projectItemForm"]) {
        this.$refs["projectItemForm"].resetFields();
      }
    },
    handleSizeChange(val) {
      console.log("页大小改变");
      console.log(val);
      this.listQuery.size = val;
      this.handleFilter();
    },
    handleCurrentChange(val) {
      console.log("页码改变");
      console.log(val);
      this.listQuery.page = val;
      this.handleFilter();
    },
    handleCostList(row) {
      this.projectCostDialogFormVisible = true;
      this.costListQuery.param.state = -1;
      this.costListQuery.page = 1;
      this.costListQuery.param.itemId = row.id;
      this.costFrom.itemId = row.id;
      this.getCostList();
    },
    getCostList() {
      getProjectCost(this.costListQuery).then(resp => {
        if (resp.code === this.successCode) {
          this.costLists = resp.datas.datas;
          this.costTotal = resp.datas.total;
        }
      })
    },
    handleCostAdd() {
      this.resetCostForm();
      this.dialogModifyCostFormVisible = true;
      this.modifyCostDialogStatus = 'create';
      this.getAllCostTypeLists();
      this.getAllUser();
    },
    handleCostCreate() {
      this.$refs['costFrom'].validate(valid => {
        if (!valid) {
          return false;
        }
        addProjectCost(this.costFrom).then(resp => {
          if (resp.code === this.successCode) {
            this.$notify({
              title: "成功",
              message: "创建成功",
              type: "success",
              duration: 2000
            });
            this.resetCostForm();
            this.getCostList();
          }
        });
      });
    },
    handleCostEdit(row) {
      this.resetCostForm();
      this.dialogModifyCostFormVisible = true;
      this.modifyCostDialogStatus = 'update';
      this.getAllCostTypeLists();
      this.getAllUser();
      this.$nextTick(() => {
        this.costFrom.id = row.id;
        this.costFrom.costName = row.costName;
        this.costFrom.costDesc = row.costDesc;
        this.costFrom.userId = row.userId;
        this.costFrom.costTypeId = row.costTypeId;
        // this.costFrom.costCount = row.costCount;
        this.costFrom.costAmount = row.costAmount;
        // this.costFrom.payState = row.payState;
      });
    },
    handleCostUpdate() {
      this.$refs['costFrom'].validate(valid => {
        updProjectCost(this.costFrom).then(resp => {
          if (resp.code === this.successCode) {
            this.$notify({
              title: "成功",
              message: "修改成功",
              type: "success",
              duration: 2000
            });
            this.resetCostForm();
            this.getCostList();
          }
        });
      });
    },
    handleCostSizeChange(val) {
      this.costListQuery.size = val;
      this.getCostList();
    },
    handleCostCurrentChange(val) {
      this.costListQuery.page = val;
      this.getCostList();
    },
    getAllUser() {
      getProjectUserInfo(this.userQuery).then(resp => {
        if (resp.code === this.successCode) {
          this.userDatas = resp.datas.datas;
        }
      })
    },
    getAllCostTypeLists() {
      getAllCostType(this.costTypeQuery).then(resp => {
        if (resp.code === this.successCode) {
          this.costTypeLists = resp.datas.datas;
        }
      })
    },
    resetCostForm() {
      this.dialogModifyCostFormVisible = false;
      this.modifyCostDialogStatus = '';
      if (this.$refs['costFrom']) {
        this.$refs['costFrom'].resetFields();
      }
    },
    handleRecordList(row) {
      this.projectRecordDialogFormVisible = true;
      this.recordListQuery.page = 1;
      this.recordListQuery.param.itemId = row.id;
      this.getRecordList();
    },
    getRecordList() {
      getItemPriceRecord(this.recordListQuery).then(resp => {
        if (resp.code === this.successCode) {
          this.recordLists = resp.datas.datas;
          this.recordTotal = resp.datas.total;
        }
      })
    },
    handleRecordSizeChange(val) {
      this.recordListQuery.size = val;
      this.getRecordList();
    },
    handleRecordCurrentChange(val) {
      this.recordListQuery.page = val;
      this.getRecordList();
    }
  }
}
</script>
